<template>
  <div class="echarts-outer-wrapper width-620">
    <Title title="全市查补税额（分单位）"></Title>
    <div class="echart-wrapper">
      <echartCompt class="echart" v-model="chartOption"></echartCompt>
    </div>
  </div>
</template>
    
<script>
import Title from "@/components/title";
import * as echartOption from "@/components/echart-axis";

export default {
  name: "qscbsefdw",
  components: {
    Title,
  },
  data() {
    return {
      prevDate: null,
      EchartData: { jcList: [] }, // 图表数据
    };
  },
  computed: {
    chartOption() {
      let _this = this;
      let xData = [];
      let data1 = [];
      let data2 = [];
      let data3 = [];
      let dataAll = [];
      let echartData = this.EchartData.jcList;
      echartData.map((item) => {
        xData.push(item.dwmc);
        data1.push(item.skje);
        data2.push(item.znjje);
        data3.push(item.fkje);
        dataAll.push(item.znjje + item.skje + item.fkje);
      });
      let max = Math.max(...dataAll);
      max = (max + "").split("");
      max = max.map((item, index) => {
        if (index == 0) {
          return parseInt(item) + 1;
        } else {
          return 0;
        }
      });
      max = parseInt(max.join(""));
      let option = {
        dataZoom: echartOption.dataZoomBottom(4),
        grid: echartOption.echartGrid({
          top: 80,
          right: 60,
          bottom: 40,
        }),
        color: [
          new _this.echarts.graphic.LinearGradient(
            0,
            0,
            1,
            0,
            [
              {
                offset: 0,
                color: "#0A7728", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#10C830", // 100% 处的颜色
              },
            ],
            false
          ),
          new _this.echarts.graphic.LinearGradient(
            0,
            0,
            1,
            0,
            [
              {
                offset: 0,
                color: "#DC9223", // 100% 处的颜色
              },
              {
                offset: 1,
                color: "#DCC725", // 0% 处的颜色
              },
            ],
            false
          ),
          new _this.echarts.graphic.LinearGradient(
            0,
            0,
            1,
            0,
            [
              {
                offset: 0,
                color: "#D7392E", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#DA6241", // 100% 处的颜色
              },
            ],
            false
          ),
        ],
        legend: echartOption.echartLegend(["税款", "滞纳金", "罚款"]),
        xAxis: {
          data: xData,
          axisTick: echartOption.xAxisTick,
          axisLine: echartOption.xAxisline,
          axisLabel: echartOption.xAxisLabel(),
        },
        yAxis: {
          max,
          ...echartOption.yAxisDw("万元"),
          axisTick: echartOption.yAxisTick,
          axisLine: echartOption.yAxisline,
          splitLine: echartOption.splitLine,
          axisLabel: echartOption.yAxisLabel,
        },
        tooltip: echartOption.tooltip(),
        toolbox: {
          show: false,
        },
        series: [
          {
            name: "税款",
            type: "bar",
            itemStyle: {
              normal: {
                color: "#f86c6b",
              },
            },
            label: {
              normal: {
                show: false,
                position: "inside",
              },
            },
            stack: "信息",
            data: data1,
          },

          {
            name: "滞纳金",
            type: "bar",
            itemStyle: {
              normal: {
                color: "#ffc107",
              },
            },
            label: {
              normal: {
                show: false,
                position: "inside",
                textStyle: {
                  color: "#000",
                },
              },
            },
            stack: "信息",
            data: data2,
          },
          {
            name: "罚款",
            type: "bar",
            barWidth: "40%",
            itemStyle: {
              normal: {
                color: "#4dbd74",
              },
            },
            label: {
              normal: {
                show: false,
                position: "inside",
              },
            },
            stack: "信息",
            data: data3,
          },
          {
            name: "总数",
            tooltip: {
              show: false,
            },
            type: "bar",
            stack: "信息",
            label: {
              normal: {
                offset: ["50", "800"],
                show: true,
                position: "insideBottom",
                formatter: "{c}",
                textStyle: {
                  color: "#ffffff",
                },
              },
            },
            itemStyle: {
              normal: {
                color: "rgba(128, 128, 128, 0)",
              },
            },
            data: dataAll,
          },
        ],
      };
      return option;
    },
  },
  created() {
    let date = "";
    let month = new Date().getMonth() + 1;
    let year = new Date().getFullYear();
    date = year + "-" + month;
    this.prevDate = date;
  },
  mounted() {
    this.ajax({
      url: "/dpzsJccxService/qscbsefdwQuery",
      method: "post",
      data: {
        param: {
          swjg: this.$route.query.qx_swjg_dm,
          tjny: this.prevDate,
        },
      },
    }).then((res) => {
      res = res.data;
      if (res.rtnCode !== "200") {
        this.$message.error(res.rtnMsg);
        return;
      }
      this.EchartData = res.data;
      // this.initEchart();
    });
  },
  methods: {},
};
</script>
    
<style scoped lang="scss">
.echarts-outer-wrapper {
  width: 536px;
  height: 476px;
}
.echart-wrapper {
  height: 416px;
  .echart {
    height: 100%;
  }
}
</style>
    